<template>
    <div style="height: 600px;overflow: auto;">
        <dev class="SelectBox" v-for="(tableH,ind) in authorityList" :key="tableH.id">
        <el-row>
            <el-col :span="24" class="work_box">
                <el-checkbox :indeterminate="indeterminateObj[tableH.id]" v-model="checkAllObj[tableH.id]"  @change="handleCheckAll(tableH.id,$event)" style="width:100px">全选</el-checkbox>{{tableH.name}}</el-col>
        </el-row>
        <el-row style="padding: 0 10px;">
            <el-checkbox-group 
                v-model="selectedList" @change="handleCheck(tableH.id)">
                <el-checkbox v-for="child in tableH.list" :label="child.id" :key="child.
  id">{{child.name}}</el-checkbox>
            </el-checkbox-group>
        </el-row>
    </dev>
    </div>
    
  </template> 
  <script>
  import {authorityList} from '@/utils/222.js'
  export default {
    name: 'user',
    data() {
      return {
        authorityList: authorityList, // 用该变量进行接收引入的权限对象
        selectedList:[],  //已选择数据
        checkedList: {}, // 选中的权限对象，用不同的数组存放不同类型的权限
        indeterminateObj: {}, // false用来控制对应权限组名称前复选框半选时的显示样式 true:显示为半选样式，false：不显示
        checkAllObj: {} // false对应权限组名称前复选框的全选/反选时的样式的变量 true: 显示为全选样式，false：不显示
      }
    },
    created() {
      this.init()
    },
    methods: {
        init(){
            this.checkedList=this.authorityList.reduce((obj,item)=>{
                obj[item.id]=[]
                    return obj
            },{}) 
            this.indeterminateObj=this.authorityList.reduce((obj,item)=>{
                obj[item.id]=false
                    return obj
            },{})
            this.checkAllObj=this.authorityList.reduce((obj,item)=>{
                obj[item.id]=false
                    return obj
            },{})   
        },
      // 处理全选/反选事件
      handleCheckAll(e1, e2) {
        // e1: 权限类型 base、stock、search、promotion、set
        // e2: 选择的状态 true: 选中， false: 取消
       
        let index = this.authorityList.findIndex(ele => ele.id == e1) // 找到选中的权限在权限对象中的位置
        
        if(e2) {
          // 如果是全选 
          this.checkedList[e1]=[]
          this.checkedList[e1].push(...this.authorityList[index].list) // 将引入的权限对象中对应的权限push入对应的选中对象中
          this.authorityList[index].list.forEach(element => {
            this.selectedList.push(element.id)
          });
          this.checkAllObj[e1] = true // 将对应权限组名称前的复选框显示为勾选
        } else {
          // 如果是取消全选
          this.checkedList[e1].forEach(item=>{
            if(this.selectedList.indexOf(item.id) !==-1){
              this.selectedList.splice(this.selectedList.indexOf(item.id),1);
            }
          })
          this.checkAllObj[e1] = false // 取消对应权限组名称前的勾选状态
        }
       this.indeterminateObj[e1] = false // 全选/反选后，都需要将半选状态清除
        // console.log("232323")
        // console.log(this.selectedList)
        // console.log(this.checkedList)
        // console.log(this.indeterminateObj)
        // console.log(this.checkAllObj)
      },
      // 处理半选事件e1
      handleCheck(e1) {
        let index = this.authorityList.findIndex(ele => ele.id == e1)
        this.checkedList[e1]=[]
        console.log(this.selectedList)
        this.authorityList[index].list.forEach((item1,ind1)=>{
              this.selectedList.forEach((item2,ind2)=>{
                    if(this.selectedList[ind2]==item1.id){
                      this.checkedList[e1].push(item1)
                    }
                })
            })
       
        console.log(this.checkedList)
        // 显示/取消点击的权限对应的权限组名称前的复选框的半选样式
        this.indeterminateObj[e1] = this.checkedList[e1].length > 0 && this.checkedList[e1].length < this.authorityList[index].list.length
        // 如果一个一个点击，全部选中/取消了对应权限组内的所有权限
        console.log('this.indeterminateObj')
        console.log(this.indeterminateObj)
        if(this.checkedList[e1].length == this.authorityList[index].list.length) {
          // 取消显示该权限组名称前复选框的半选状态
          this.indeterminateObj[e1] = false
          // 改为全选样式
          this.checkAllObj[e1] = true
        } else {
          // 没有通过一个个点击选择对应权限组的全部权限即半选状态，就不显示全选的样式
          this.checkAllObj[e1] = false
        }
      },
    }
  }
  </script>